<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-split-layout
        width="266px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <!-- 表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          height="calc(100vh - 265px)"
          :need-page="false"
          :current.sync="current"
          highlight-current-row
          :toolbar="false"
          @row-click="selectRow"
        >
        </ele-pro-table>
        <template slot="content">
            <el-tabs type="border-card">
                <el-tab-pane label="PC菜单权限">
                    <role-menupc  :visible.sync="showDataPC" :menuData="menuArray"  :roleId="currentRole"  />    
                </el-tab-pane>
                <el-tab-pane label="APP菜单权限">

                </el-tab-pane>
            </el-tabs>
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import RoleMenupc from './components/role-menupc';
  import { GetAllRoles } from '@/api/usermanager/roleauthmanager';
  import { QueryALLMenuTreeByRole } from '@/api/usermanager/roleauthmanager';

  export default {
    name: 'RoleAuth',
    components: { RoleMenupc },
    data() {
      return {
        // 表格列配置
        columns: [
            {
                prop: 'name',
                label: '角色名称',
                showOverflowTooltip: true,
            }
        ],
        // 当前编辑数据
        current: null,
        //当前角色id
        currentRole:'',
        //展示
        showDataPC:false,
        //根据角色选择的菜单
        menuArray:[],
      };
    },
    methods: {
      /* 角色数据源 */
      datasource() {
        return GetAllRoles();
      },

      /* 选中行事件 */
      selectRow(row){
        this.current = row;
        this.currentRole = row.id;
        this.queryRoleMenu(row.id);
      },

      /* 选中行后绑定数据 */
      async queryRoleMenu(roleid){
          let menus =  await QueryALLMenuTreeByRole(roleid);
          this.menuArray = menus;
      },
    }
  };
</script>

